<template>
	<div class="me">
		<div class="me-header">
			<div>
				<el-avatar :size="120" :src="userInfo.avatar" />
			</div>
			<div class="me-header-right">
				<div class="me-header-right-top">
					<div class="name">{{ userInfo.username }}</div>
				</div>
			</div>
		</div>
		<div class="me-content">
			<div class="flex justify-between border-b h-15 z-10 bg-[#252632] mt-5" style="position: sticky; top: 10vh">
				<div class="flex">
					<div
						:class="['mr-8', 'text-xl', 'hover:text-white', 'cursor-pointer', activeTab === 'collection' ? 'text-white' : 'text-gray-400']"
						@click="switchTab('collection')"
					>
						收藏
					</div>

					<div
						:class="['mr-8', 'text-xl', 'hover:text-white', 'cursor-pointer', activeTab === 'myhot' ? 'text-white' : 'text-gray-400']"
						@click="switchTab('myhot')"
					>
						我的评分
					</div>
				</div>
				<div></div>
			</div>
			<div class="">
				<collection v-if="activeTab === 'collection'" />
				<myhot v-if="activeTab === 'myhot'" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import Collection from "@/views/film/me/collection.vue";
import { useRoute } from "vue-router";
import { useUserStore } from "@/stores/userStores";
import Myhot from "@/views/film/me/myhot.vue";

const route = useRoute();
const userStore = useUserStore();

const activeTab = ref(route.query.tab || "collection");

const userInfo = reactive({
	id: null,
	username: userStore.getUserInfo().username,
	name: "",
	phone: "",
	level: null,
	avatar: userStore.getUserInfo().avatar,
	email: "",
	address: null,
	description: null,
	followingCount: null,
	likeCount: 0,
	isFollow: false,
	befollwingCount: 0,
});

const works = reactive([]);

const switchTab = (tab) => {
	activeTab.value = tab;
	route.query.tab = tab;
};

onMounted(() => {});
</script>

<style scoped lang="less">
.me {
	//margin: 0 auto;
	//width: 70%;
}

// 抽取.me-header 样式
.me-header {
	display: flex;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.8);

	.me-header-right {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		justify-content: space-between;

		.me-header-right-top {
		}

		.name {
			font-size: 20px;
			font-weight: bold;
		}

		.me-header-right-bottom {
			display: flex;
			justify-content: space-between;

			.item {
				//cursor: pointer;
				color: rgba(255, 255, 255, 0.5);
				// 间距
				padding: 0 10px;

				&:hover {
					color: #fff;
				}
			}
		}
	}
}
</style>
